<template>
    <div class="img__box">
        <img src="http://www.dell-lee.com/imgs/vue3/user.png" alt="png" class="img__box__conten">
    </div>
    <form action="#" class="user">
        <input type="text" placeholder="请输入手机号" class="user__Name" v-model="userData.userName">
        <input type="password" placeholder="请输入密码" class="user__Password" v-model="userData.userPassword">
        <input type="password" placeholder="确认密码" class="user__Password__notarize" v-model="userData.password">
        <input type="button" :value="userData.btnText" class="user__btn" @click="handleClick">
    </form>
    <div class="option">
        <span @click="handleLoginClick">已有账号去登陆</span>
    </div>
    <Warn :warnData="toastData.warnData" v-if="toastData.iswarn"/>
</template>

<script>
import { useRouter } from 'vue-router'
import { useAxiosFn } from '../login/Login'
import Warn, { useToast } from '../login/Warn'

const useLogin = () => {
  const router = useRouter()
  const handleLoginClick = () => {
    router.push({ name: 'Login' })
  }

  return { handleLoginClick }
}

export default {
  name: 'Register',
  components: { Warn },
  setup () {
    const { toastData, loginWarnFn } = useToast()
    // 发送表单数据请求相关
    const { userData, handleClick } = useAxiosFn('/api/user/register', loginWarnFn, '注册失败', '注册', 'Login')

    const { handleLoginClick } = useLogin()

    return { handleClick, userData, toastData, handleLoginClick }
  }
}
</script>

<style lang="scss">
@import '../../style/mixinApi.scss';
.user__Password__notarize {
    @include inputStyle();
    margin-top: .16rem;
        &::placeholder {
            @include inputPlaceholder();
        }
}

</style>
